﻿*, :before, :after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

#mobil .flexslider {
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  overflow: hidden;
  box-shadow: none;
}
#mobil .flexslider .flex-viewport {
  height: 100%;
}

#mobil .flexslider .flex-control-nav {
  bottom: 45%;
  padding-left: 94%;
}

/*#mobil .flexslider .flex-control-nav {
  bottom: 20px;
}*/
#mobil .flexslider .slides {
  height: 100%;
}
#mobil .flexslider .slides li {
  height: 100%;
}
#mobil .flexslider li .meta {
  	display: table-row;
}


/*/////////// MCS Mobile ///////////*/

#mobil .flex-control-paging li a {
    display: block;
    width: 10px;
    height: 10px;
	background: transparent;
    background: transparent;
    text-indent: -9999px;
    border-radius: 50%;
    border: 2px solid;
    border-color: #00a160;
    text-decoration: none;
	cursor: pointer;
	box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

#mobil .flex-control-paging li a:hover {
    background: #00a160;
    background: rgba(0,161,96,1)
}

#mobil .flex-control-paging li a.flex-active {
    background: #00a160;
    background: rgba(0,161,96,1);
    cursor: default
}


/*////////////// Bolitas Verticales //////////////*/


#mobil .flex-control-nav li {
	display: block;
	margin: 6px 0;
}


/*////////////// Bolitas Verticales -END- //////////////*/


/*///////// Texto de los banners ///////////*/

/*.flexslider li {
		position: relative;
}
*/
#mobil .flexslider li .meta {
		/*position: absolute;*/
		top: 32%;
		/*left: 100px;*/
		color: white;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		font-family: 'Roboto', sans-serif;
}

#mobil .flexslider li h1 {
		/*background: rgba(51, 51, 51, 0.5);*/
		padding: 0px 0px 0px 12px;
		margin-bottom: 0;
		font-size: 3em;
		font-weight: 300;
		color: #00A160
}

#mobil .flexslider li h2 {
		/*background: rgba(51, 51, 51, 0.5);*/
		padding: 10px 0px 0px 12px;
		font-size: 2em;
		margin-bottom: 0;
		font-weight: 300;
		color: #00A160
}

#mobil .flexslider li .category {
		padding: 20px 0px 0px opx;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;

}

#mobil .flexslider li .category p {
		color: #00a160;
		margin-right: 7px;
		font-size: 1.1em;
		padding: 12px 18px 10px;
		font-weight: 300;
}

#mobil .flexslider li h1,
#mobil .flexslider li h2,
#mobil .flexslider li .category p,
#mobil .flexslider li .category span {
		-webkit-animation-duration: .4s;
		animation-duration: .4s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeOutLeft;
		animation-name: fadeOutLeft;
}

#mobil .flexslider li.flex-active-slide .meta h1,
#mobil .flexslider li.flex-active-slide .meta h2,
#mobil .flexslider li.flex-active-slide .meta .category p,
#mobil .flexslider li.flex-active-slide .meta .category span {
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
		-webkit-animation-duration: .4s;
		animation-duration: .4s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
}

#mobil .flexslider li.flex-active-slide .meta h2 {
		-webkit-animation-delay: .5s;
		animation-delay: .5s;
}

#mobil .flexslider li.flex-active-slide .meta .category p {
		-webkit-animation-delay: .6s;
		animation-delay: .6s;
}


@media screen and (max-width:860px) {
    #mobil .flex-direction-nav .flex-prev {
        display: none;
    }

    #mobil .flex-direction-nav .flex-next {
        display: none;
    }
	#mobil .flexslider li .meta {
		top: 30%;
		left: 40px;
		max-width: 350px;
	}
	#mobil .flexslider li h1 {
		font-size: 3em;
		margin-top: 0px;
		padding: 0px 0px 0px 12px;

	}
	#mobil .flexslider li h2 {
		padding: 15px 0px 0px 12px;
		margin-top: 0px;

	}
	#mobil .flexslider li .category {
		margin-top: 0px;
		padding: 20px 0px 0px ;

	}
	#mobil .flexslider .flex-control-nav {
    	bottom: 5px;
		padding-left: 0;
	}
	#mobil .flex-control-nav li {
        margin: 0 6px;
        display: inline-block;
	}

}

@media screen and (max-width:768px) {
    #mobil .flex-direction-nav .flex-prev {
        display: none;
    }

    #mobil .flex-direction-nav .flex-next {
        display: none;
    }
	#mobil .flexslider li .meta {
		top: 30%;
		left: 22px;
		max-width: 400px;
	}
	#mobil .flexslider li h1 {
		font-size: 2.5em;
		margin-top: 0px;
		padding: 0px 0px 0px 12px;

	}
	#mobil .flexslider li h2 {
		padding: 10px 0px 0px 12px;
		margin-top: 0px;

	}
	#mobil .flexslider li .category {
		margin-top: 0px;
		padding: 15px 0px 0px ;

	}
}
@media screen and (max-width:680px) {
	#mobil .flexslider li .meta {
		top: 35%;
		left: 22px;
		max-width: 300px;
	}
	#mobil .flexslider li h1 {
		font-size: 2em;
		margin-top: 0px;
		padding: 0px 0px 0px 12px;

	}

}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	
	#mobil .flexslider li .meta {
		top: 30%;
		left: 12px;
		max-width: 250px;
	}
		
	#mobil .flexslider li h1 {
		font-size: 1.5em;
		padding: 0px 0px 0px 12px;
	}
	#mobil .flexslider li h2 {
		display: none;
		font-size: 1.0em;
		margin-top: 0px;
		padding: 10px 0px 0px 12px;

	}
	#mobil .flexslider li .category {
		margin-left: 0px;
		padding: 15px 0px 0px ;
		margin-top: 0px;

	}
	
}

@media only screen and (max-width : 375px) {
	
	#mobil .flexslider li .meta {
		top: 30%;
		left: 12px;
		max-width: 250px;
	}
		
	#mobil .flexslider li h1 {
		font-size: 1.5em;
		padding: 0px 0px 0px 12px;
	}
	#mobil .flexslider li h2 {
		display: none;
		font-size: 1.0em;
		margin-top: 0px;
		padding: 10px 0px 0px 12px;

	}
	#mobil .flexslider li .category {
		margin-left: 0px;
		padding: 10px 0px 0px ;
		margin-top: 0px;
	}
	
}


/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

	#mobil .flexslider li .meta {
		left: 5px;
		top: 25%;
		max-width: 200px;
	}
	#mobil .flexslider li h1 {
		font-size: 1.3em;
		padding: 0px 0px 0px 12px;
	}

	#mobil .flexslider li.flex-active-slide .meta h2 {
 		display:none;
	}
	#mobil .flexslider li .category {
		padding: 5px 0px 0px ;
		margin-top: 0px;

	}
	
	
	#mobil .flexslider .flex-control-nav {
		margin-left: 20px !important;
	}	
	#mobil .flexslider .flex-control-nav {
		bottom: 0;
	}

}

